<template>
  <div class="contextmenu" :style="{ top: top + 'px', left: left + 'px' }">
    <div class="menuGroups">
      <div class="item" @click="handleLock" v-if="!showMergeBtn && !cellInfo.isLock"><i class="el-icon-lock"></i>锁定</div>
      <div class="item" @click="handleUnLock" v-if="!showMergeBtn && cellInfo.isLock"><i class="el-icon-unlock"></i>解锁</div>
      <div class="item" @click="handleMerge" v-if="showMergeBtn"><i class="el-icon-scissors"></i>合并</div>
      <div class="item" @click="handleSplit" v-if="showSplitBtn"><i class="el-icon-scissors"></i>拆分</div>
      <div class="item" @click="handleClearCell"><i class="el-icon-delete"></i>清除</div>
      <div class="item" @click="handleAddRows"><i class="el-icon-bottom"></i>插入行</div>
      <div class="item" @click="handleAddColumns"><i class="el-icon-right"></i>插入列</div>
      <div class="item" @click="handleDeleteRows"><i class="el-icon-delete"></i>删除行</div>
      <div class="item" @click="handleDeleteColumns"><i class="el-icon-delete"></i>删除列</div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex';
import { isClickSameCell } from './util.js';
export default {
  props: {
    top: {
      type: Number,
      default: 0
    },
    left: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {};
  },
  computed: {
    ...mapState({
      cellInfo: (state) => state.form.cellInfo,
      boxAreaXY: (state) => state.form.boxAreaXY
    }),
    // 是否框选多个单元格
    isSameCell() {
      return isClickSameCell(this.boxAreaXY.startX, this.boxAreaXY.startY, this.boxAreaXY.endX, this.boxAreaXY.endY);
    },
    showMergeBtn() {
      return this.isSameCell;
      //  && this.cellInfo.merge.length > 0 && this.cellInfo.merge.join() == '1,1';
    },
    showSplitBtn() {
      return !this.isSameCell && this.cellInfo && this.cellInfo.merge && this.cellInfo.merge.length > 0 && this.cellInfo.merge.join() != '1,1';
    }
  },
  methods: {
    handleLock() {
      this.$store.commit('form/lock');
      this.$emit('command', 'handleLock');
    },
    handleUnLock() {
      this.$store.commit('form/unlock');
      this.$emit('command', 'handleUnLock');
    },
    handleMerge() {
      this.$store.commit('form/merge');
      this.$emit('command', 'handleMerge');
    },
    handleSplit() {
      this.$store.commit('form/split');
      this.$emit('command', 'handleSplit');
    },
    handleAddRows() {
      const that = this;
      let isSameCell = isClickSameCell(that.boxAreaXY.startX, that.boxAreaXY.startY, that.boxAreaXY.endX, that.boxAreaXY.endY);
      let currentRowIndex = that.cellInfo.y - 1;
      if (isSameCell) {
        // 框选
        currentRowIndex = that.boxAreaXY.endY;
      } else {
        if (that.cellInfo.merge[0] > 1) {
          currentRowIndex = that.cellInfo.y + that.cellInfo.merge[0] - 2;
        } else {
          currentRowIndex = that.cellInfo.y - 1;
        }
      }
      that.$store.commit('form/addRows', {
        index: currentRowIndex,
        level: 'base'
      });
      that.$emit('command', 'handleAddRows');
    },
    handleAddColumns() {
      const that = this;
      let isSameCell = isClickSameCell(that.boxAreaXY.startX, that.boxAreaXY.startY, that.boxAreaXY.endX, that.boxAreaXY.endY);
      let currentColumnIndex = that.cellInfo.x - 1;
      if (isSameCell) {
        // 框选
        currentColumnIndex = that.boxAreaXY.endX;
      } else {
        if (that.cellInfo.merge[1] > 1) {
          currentColumnIndex = that.cellInfo.x + that.cellInfo.merge[1] - 2;
        } else {
          currentColumnIndex = that.cellInfo.x - 1;
        }
      }
      that.$store.commit('form/addColumns', {
        index: currentColumnIndex
      });
      that.$emit('command', 'handleAddColumns');
    },
    handleDeleteRows() {
      this.$store.commit('form/deleteRows', {
        index: this.isSameCell ? this.boxAreaXY.startY : this.cellInfo.y - 1, // 删除的数据行索引
        count: this.isSameCell ? this.boxAreaXY.height : this.cellInfo.merge[0] // 删除的数据行数
      });
      this.$emit('command', 'handleDeleteRows');
    },
    handleDeleteColumns() {
      this.$store.commit('form/deleteColumns', {
        index: this.isSameCell ? this.boxAreaXY.startX : this.cellInfo.x - 1, // 删除的数据列索引
        count: this.isSameCell ? this.boxAreaXY.width : this.cellInfo.merge[1] // 删除的数据列数
      });
      this.$emit('command', 'handleDeleteColumns');
    },
    handleClearCell() {
      this.$store.commit('form/clearCellData', {});
      this.$emit('command', 'handleClearCellInfo');
    }
  }
};
</script>
<style scoped lang="scss">
.contextmenu {
  z-index: 9999;
  background: hsl(215deg, 15%, 20%);
  color: #bcc9d4;
  position: absolute;
  user-select: none;
  min-width: 150px;

  .menuGroups {
    .item {
      padding: 0 6px;
      line-height: 28px;
      height: 28px;
      border-left: 2px solid transparent;
      cursor: pointer;
      overflow: hidden;
      // padding-right: 3em;
      display: flex;
      align-items: center;
      i {
        margin-right: 3px;
      }
      &.disable {
        color: #576369 !important;
        pointer-events: none;
      }
      &:hover {
        background-color: #1d262e;
        color: #2681ff;
        border-left: 2px solid #2681ff;
      }
    }
  }
}
</style>
